import React, { useState, useEffect } from 'react'
import { View } from '@tarojs/components'
import { Button, ConfigProvider, TextArea, Dialog, Input, Loading } from '@nutui/nutui-react-taro'
import enUS from '@nutui/nutui-react-taro/dist/locales/en-US'
import zhCN from '@nutui/nutui-react-taro/dist/locales/zh-CN'
import { ScrollView } from '@tarojs/components'
import { IconFont } from '@nutui/icons-react-taro'
import { getGoodsList } from '../../api/index'
import { Product } from 'src/types/Product'
import GoodsCard from '../../component/GoodsCard'
import { showLoading, hideLoading } from '@tarojs/taro'
import './index.less'
function Index() {
  const [locale, setLocale] = useState(zhCN)
  const localeKey = locale === zhCN ? 'zhCN' : 'enUS'
  const [visible, setVisible] = useState(false)
  const [products, setProducts] = useState<Product[]>([])
  const [value, setValue] = useState('')
  const [translated] = useState({
    zhCN: {
      welcome: '欢迎使用 NutUI React 开发 Taro 多端项目。',
      button: '使用英文',
      open: '点击打开',
    },
    enUS: {
      welcome: 'Welcome to use NutUI React to develop Taro multi-terminal projects.',
      button: 'Use Chinese',
      open: 'Click Me',
    },
  })
  const handleSwitchLocale = () => {
    setLocale(locale === zhCN ? enUS : zhCN)
  }
  const fetchList = async (product_name = value) => {
    showLoading({
      title: '加载中...',
      mask: true // 防止触摸穿透
    })
    const { data, success } = await getGoodsList({
      all_products: true,
      product_name
    })
    if (success) {
      setProducts(data.list)
      console.log(data)
      hideLoading()
    }
    hideLoading()

  }
  useEffect(() => {
    fetchList()
  }, [])
  return (
    <ConfigProvider locale={locale}>
      <View className="wrapper" >
        <Loading direction="vertical">加载中</Loading>
      </View>
      <View className='nutui-react-demo'>
        {/* 顶部搜索模块 */}
        <View className='header'>
          <View className='header-title'>小楠</View>
          <Input clearable onClear={() => {
            fetchList('')
          }} className='header-input' value={value} onChange={(e) => {

            setValue(e)
          }}></Input>
          <Button onClick={() => {
            fetchList(value)
          }} type='primary'>搜索</Button>
        </View>
        {/* 商品区域 */}
        <View className='goods'>
          <ScrollView scrollY style={{ height: '100vh', width: '100%', display: 'flex', flexDirection: 'row', justifyContent: 'space-between', flexWrap: 'wrap' }} >
            {
              products.map((item: any) => {
                return <GoodsCard key={item.id} item={item} />
              })
            }

          </ScrollView>
        </View>
      </View>
    </ConfigProvider>
  )
}

export default Index
